<template>
        <div>
            {{str}} ---{{ num }}
            <!--<button v-on:click="add">+1</button>-->
            <button v-on:click="add(2)">+2</button>
            <!--@是v-on指令的语法糖 v-on:事件类型=“事件处理函数”-->
            <button @click="sub($event)">-1</button>
            <!--<button @click="sub">-1</button>-->
            <!--<button @click="num--">-1</button>-->
    
            <div>{{ str }}</div>
    
            <a v-bind:href="imgUrl" target="_blank">{{ name }}</a >
            <!--标签的属性 动态绑定类名-->
            <!--语法糖-->
            <img :src="imgUrl" />
            <!--< img src:-->
            <!--<div v-bind:class:""></div>-->
        </div>
    </template>
    <script setup>
    import { ref } from 'vue'
    
    let num = ref(10)
    
    let str = "hello";
    
    //链接的地址是动态的/从后台获取到的
    let name = ref ('百度一下')
    let url = ref ('https://www.baidu.com/')
    let imgUrl = ref('https://tse3-mm.cn.bing.net/th/id/OIP-C.vLJbSBORWoCAHf0IQ36imQHaDY?w=334&h=159&c=7&r=0&o=5&dpr=1.3&pid=1.7')
    
    //let add = ()=>{
    //    console.log(num);
    //    num.value++
    //}
    
    //事件绑定
    function add(a) {
        // += num = num + a
        num.value+=a
    }
    
    //-1事件
    let sub = (e)=>{
        console.log(e);
        num.value--
    }
    
    </script>
    <style scoped>
    </style>